<template>
    <div class="site-wrapper site-page--login">
        <div class="site-content__wrapper">
            <div class="site-content">
                <div class="brand-info">
                    <!-- <h1 class="brand-info__title">河北宏信内部办公平台 -->
                        <!--<div class="line"></div>-->
                    <!-- </h1> -->
                   <!-- <h2 class="brand-info__text">应用范围
                        &lt;!&ndash;<div class="line"></div>&ndash;&gt;
                    </h2>
                    <h3 class="brand-info__intro">各级监管部门，各级监督人员</h3>-->
                </div>
                <div class="login-main">
                    <h2 class="login-brand">用户登陆</h2>
                    <el-form :model="dataForm" :rules="dataRule" ref="dataForm"  status-icon>
                        <!-- <el-form-item>
                            <el-select v-model="$i18n.locale" class="w-percent-100" >
                                <el-option v-for="(val, key) in i18nMessages" :key="key" :label="val._lang" :value="key"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item prop="username">
                            <el-input v-model="dataForm.username" :placeholder="$t('login.username')">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                </span>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
                </span>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="captcha">
                            <el-row :gutter="20">
                                <el-col :span="14">
                                    <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
                    <span slot="prefix" class="el-input__icon">
                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
                    </span>
                                    </el-input>
                                </el-col>
                                <el-col :span="10" class="login-captcha">
                                    <img :src="captchaPath" @click="getCaptcha()">
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                            <el-button native-type="submit" type="success" @click.prevent="dataFormSubmitHandle()" :loading="btnLoading" class="w-percent-100">{{ $t('login.title') }}</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button  v-if="uppwdBtnVisible" class="w-percent-100" plain  @click="updatePasswordHandle">{{ $t('updatePassword.title') }}</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <!-- 弹窗, 修改密码 -->
        <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
        <register v-if="registerVisible" ref="register"></register>
    </div>
</template>
<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
import { messages } from '@/i18n'
import UpdatePassword from '@/views/pages/update-password'
import register from '@/views/pages/register'
import { getUUID } from '@/utils'
export default {
  data () {
    return {
      i18nMessages: messages,
      register: true,
      uppwdBtnVisible: false,
      updatePassowrdVisible: false,
      registerVisible: false,
      captchaPath: '',
      dialog: false,
      form: {},
      dataForm: {
        username: '',
        password: '',
        uuid: '',
        captcha: ''

      },
      btnLoading: false
    }
  },
  components: {
    UpdatePassword,
    register
  },
  computed: {
    dataRule () {
      return {
        username: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getCaptcha()
    localStorage.removeItem('deptId')
    localStorage.removeItem('deptName')
  },
  methods: {
    dialogClose (val) {
      this.dialog = val
    },
    toRes () {
      this.$router.push({
        name: 'register'
      })
    },
    // 修改密码
    updatePasswordHandle () {
      this.updatePassowrdVisible = true
      this.$nextTick(() => {
        this.$refs.updatePassowrd.init()
      })
    },
    // 获取验证码
    getCaptcha () {
      this.dataForm.uuid = getUUID()
      this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      // eslint-disable-next-line no-unreachable
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.btnLoading = true
        this.$http.post('/login', this.dataForm).then(({ data: res }) => {
          if (res.code !== 0) {
            this.getCaptcha()
            this.btnLoading = false
            return false // this.$message.error(res.msg)
          }
          sessionStorage.setItem('store', JSON.stringify(this.$store.state))
          Cookies.set('studyToken', res.data.token)
          this.btnLoading = false
          this.$router.replace({ name: 'home' })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style lang="scss">
    .site-wrapper.site-page--login {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(38, 50, 56, 0.17);
        overflow: hidden;
        &:before {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
            content: "";
            background-image: url(~@/assets/img/login_bg.jpg);
            background-size: 100% 100%;
        }
        .login-brand{
            margin: 81px 0 60px 0;
            font-size: 30px;
            font-weight: bold;
            line-height: 34px;
            /* color: #396afe; */
            color: rgb(36, 9, 17);
            text-align: center;
        }
        .site-content__wrapper {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 0;
            margin: 0;
            overflow-x: hidden;
            overflow-y: auto;
            background-color: transparent;
        }
        .site-content {
            min-height: 100%;
            padding: 30px 500px 30px 30px;
        }
        .brand-info {
            margin: 220px 100px 0 90px;
            color: #fff;
        }
        .brand-info__text {
            margin:  0 0 22px 0;
            color: rgba(204, 204, 204, 0.02);
            font-weight: 700;
            font-size: 28px;
            text-transform : uppercase;
            position: relative;
            .line{
              position: absolute;
              left: 55px;
              transform: translate(-50%, 0);
              top: 40px;
              width: 60px;
              height: 0;
              border-top: 1px solid white;
              opacity: 0.6;
            }
        }
        .brand-info__title {
            margin:  0 0 35px 0;
            color: rgba(252, 247, 251, 1);
            font-weight: 700;
            font-size: 38px;
            text-transform : uppercase;
            position: relative;
            .line{
                position: absolute;
                left: 55px;
                transform: translate(-50%, 0);
                top: 40px;
                width: 60px;
                height: 0;
                border-top: 1px solid white;
                opacity: 0.6;
            }
        }
        .brand-info__intro {
        margin: 0 auto;
        line-height: 26px;
        font-size: 16px;
            color: #ccc;
        padding-bottom: 30px;
        }
        .login-main {
            position: absolute;
            top: 0;
            right: 0;
            padding: 150px 60px 180px;
            width: 470px;
            min-height: 100%;
            background-color: rgba(29, 214, 255, 0.07);
        }
        .login-title {
            font-size: 16px;
        }
        .login-captcha {
            overflow: hidden;
            > img {
                width: 100%;
                cursor: pointer;
            }
        }
        .login-btn-submit {
            width: 100%;
            margin-top: 38px;
        }
    }
</style>
